<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <div class="contentBattery">
      <div class="contentBatterydiv" v-if="roles == 'agent'">
        Can Extract Money：<span class="contentBatteryspan">{{
          "$" + cash || "$0.00"
        }}</span>
      </div>
    </div>
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="800px"
      :isHandle="true"
    />

    <el-dialog width="450px" :title="chcekTitle" :visible.sync="chcekShow">
      <el-form :model="chcekData" :rules="chcekRules" ref="chcekForm">
        <el-form-item label="Audit Remarks" label-width="120px" prop="remark">
          <el-input type="textarea" v-model="chcekData.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chcekShow = false">Cancel</el-button>
        <el-button type="primary" @click="chcekFn('chcekForm')"
          >Confirm</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        agentName: "", //Agent Name
        payeeAccount: "", //Receiving Account
        payeeType: "", //Receiving AccountType
        payeeName: "", //Recipient
        status: null, //Status  0 Pending Review 1Review Pass/提现完成 2Review Reject
        beginTime: "", //Start Time
        endTime: "" //End Time
      },
      roles: "",
      chcekShow: false,
      chcekTitle: "",
      chcekData: {
        id: "",
        result: null, //审核结果 1 Pass 2拒绝
        remark: "" //审核Remarks
      },
      chcekRules: {
        remark: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      searchForm: [
        {
          type: "input",
          prop: "payeeAccount",
          placeholder: "Receiving Account",
          width: 260
        },
        {
          type: "input",
          prop: "payeeType",
          placeholder: "Receiving Account Type",
          width: 295
        },
        {
          type: "input",
          prop: "payee Name",
          placeholder: "Recipient",
          width: 220
        },
        {
          type: "date",
          prop: "beginTime",
          placeholder: "Extract Start Time",
          width: 280
        },
        {
          type: "date",
          prop: "endTime",
          placeholder: "Extract End Time",
          width: 280
        },
        {
          type: "select",
          prop: "status",
          placeholder: "Status",
          width: 180,
          options: [
            {
              label: "Pending Review",
              value: 0
            },
            {
              label: "Review Pass",
              value: 1
            },
            {
              label: "Review Reject",
              value: 2
            }
          ]
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          plain: true,
          icon: "el-icon-search",
          handle: e => {
            this.zeroFn();
            this.init();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              agentName: "", //Agent Name
              payeeAccount: "", //Receiving Account
              payeeType: "", //Receiving AccountType
              payeeName: "", //Recipient
              status: null, //Status  0 Pending Review 1Review Pass/提现完成 2Review Reject
              beginTime: "", //Start Time
              endTime: "" //End Time
            };
            this.zeroFn();
            this.init();
          }
        }
      ],

      tableHandles: [
        {
          label: "Request Withdrawal",
          type: "primary",
          plain: true,
          handle: e => this.elFormVisible(),
          isShow: row => {
            return sessionStorage.role == "agent" ? true : false;
          }
        },
        {
          label: "Export Withdrawal Records",
          type: "primary",
          icon: "el-icon-download",
          // titles: '可以根据Order Nnumber、Device Number、Phone、Start Time、End Time筛选出订单再Export，也可以不选，直接ExportWhole订单',
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.withdrawRecordExport(this.searchData);
            // console.log(333, this.searchData, res.msg);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "Agent Name",
          prop: "agentName"
        },
        {
          label: "Money",
          prop: "money",
          formatter: e => "$" + e.money
        },
        {
          label: "Receiving Account",
          prop: "payeeAccount"
        },
        {
          label: "Receiving Account Type",
          prop: "payeeType"
        },
        {
          label: "Recipient",
          prop: "payeeName"
        },
        {
          label: "Status",
          prop: "status",
          itemClass: e =>
            e.status == 0 || e.status == 2
              ? "danger"
              : e.status == 1
              ? "success"
              : "--",
          formatter: e =>
            e.status === 0
              ? "Pending Review"
              : e.status === 1
              ? "Review Pass"
              : e.status === 2
              ? "Review Reject"
              : "--"
        },
        {
          label: "Withdrawal Time",
          prop: "ctime"
        },
        {
          label: "Remarks",
          prop: "remake"
        },
        {
          label: "Review User Name",
          prop: "checkUser"
        },
        {
          label: "Audit Time",
          prop: "checkTime"
        },

        // {
        //   label: 'EnableStatus',
        //   type: "switch",
        //   prop: 'status',
        //   values: [1, 2],
        //   change: (row) => this.changestate(row)
        // },

        {
          label: "Operations",
          type: "button",
          width: 120,
          btnList: [
            {
              label: "Pass",
              type: "text",
              isShow: e => {
                return sessionStorage.role == "operator" && e.status === 0
                  ? true
                  : false;
              },
              handle: row => {
                this.$confirm(
                  "Are you sure to approve the withdrawal application?",
                  "Hint",
                  {
                    confirmButtonText: "Confirm",
                    cancelButtonText: "Cancel",
                    type: "warning"
                  }
                )
                  .then(async () => {
                    this.chcekData.id = row.id;
                    this.chcekData.result = 1;
                    this.chcekShow = true;
                    this.chcekData.remark = "";
                    this.chcekTitle = "By Withdrawal";
                  })
                  .catch(() => {});
              }
            },
            {
              label: "No Pass",
              type: "text",
              isShow: e => {
                return sessionStorage.role == "operator" && e.status === 0
                  ? true
                  : false;
              },
              handle: row => {
                this.chcekData.id = row.id;
                this.chcekData.result = 2;
                this.chcekShow = true;
                this.chcekData.remark = "";
                this.chcekTitle = "Rejection Withdrawal";
              }
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        accountId: "",
        money: ""
      },
      formCols: [
        {
          type: "select",
          label: "Withdrawal Account",
          width: 350,
          prop: "accountId",
          options: []
        },
        {
          type: "input",
          label: "Withdrawal Amount($)",
          width: 350,
          prop: "money"
          // remark: "元"
        }
      ],
      formRules: {
        accountId: [
          {
            required: true,
            message: "Please Select Withdrawal Account",
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: "Please Input Withdrawal Amount",
            trigger: "blur"
          }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],
      cash: 0
    };
  },
  async mounted() {
    this.init();
    this.roles = sessionStorage.role;
    if (sessionStorage.role == "agent") {
      this.batteryTypeList();
    }
    this.withdrawRecordGetWithdrawMoney();
  },
  methods: {
    zeroFn() {
      this.tablePage.limit = 10;
      this.tablePage.page = 1;
      this.tablePage.total = 0;
    },
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.withdrawRecordList(parm);
      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
    },
    //获取可提现Balance
    async withdrawRecordGetWithdrawMoney() {
      const res = await this.apis.withdrawRecordGetWithdrawMoney();
      this.cash = res.data;
    },
    // 账户列表
    async batteryTypeList() {
      const res = await this.apis.accountList({
        pageNum: 1,
        pageSize: 100
      });
      let options = [];
      if (res.data.length !== 0) {
        res.data.forEach(res => {
          options.push({
            label: res.account,
            value: res.id
          });
        });
      }
      this.formCols[
        this.labIndex2(this.formCols, "accountId")
      ].options = options;
    },
    // Request Withdrawal---确认按钮
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.formData.money = Number(this.formData.money);
          if (this.formData.money > this.cash) {
            this.$message({
              type: "error",
              message: `Your withdrawal account cannot be larger than $${this.cash}`
            });
            return false;
          }
          const res = await this.apis.withdrawRecordWithdraw(this.formData);
          if (res.code == 200) {
            this.init();
            this.withdrawRecordGetWithdrawMoney();
          }
          this.$message({
            message: res.msg,
            type: res.code == 200 ? "success" : "error"
          });
          this.elFormVisible();
        }
      });
    },

    // Operator提现审核---确认按钮
    chcekFn(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          console.log(321234, this.formData);
          const res = await this.apis.withdrawRecordCheck({
            id: this.chcekData.id,
            result: this.chcekData.result, //审核结果 1 Pass 2拒绝
            remark: this.chcekData.remark || "" //审核Remarks
          });
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.init();
          this.chcekShow = false;
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}

.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
}

.contentBatterydiv {
  width: 250px;
}

.contentBatteryspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
